<!--  -->
<template>
  <div class="app-container">
    <div>
      <router-link to="/jimeiquanzi/article">
        <el-button type="text" icon="el-icon-arrow-left" size="default"
          >返回</el-button
        >
      </router-link>
    </div>

    <el-form :inline="true" size="small">
      <el-form-item label="字符编号">
        <el-input
          v-model="artileId"
          placeholder="请输入字符编号"
          size="small"
        ></el-input>
      </el-form-item>
      <el-form-item label="字符名称">
        <el-input
          v-model="artileId"
          placeholder="请输入字符名称"
          size="small"
        ></el-input>
      </el-form-item>

      <el-button icon="el-icon-search" type="primary" size="small" @click
        >搜索</el-button
      >
      <el-button icon="el-icon-refresh" size="small" @click>重置</el-button>
      <el-button icon="el-icon-edit" type="warning" size="small" @click='add()'
        >新增</el-button
      >
      <el-button icon="el-icon-delete" type="danger" size="small" @click
        >删除</el-button
      >
    </el-form>

    <div style="margin-top: 20px">
      <el-table :data="cate_list" border stripe>
      <el-table-column type="selection" align="center" width="60" />

        <template v-for="(col, index) in columns">
          <el-table-column
            :prop="col.data"
            :key="col.id"
            :label="col.label"
            align="center"
            :width="col.width"
          ></el-table-column>
        </template>
        <el-table-column label="操作" align="center" width="200">
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-edit"
              @click="edit(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              icon="el-icon-delete"
              style="color: #f66"
              @click="deleteCategory(scope.$index)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page.sync="pageData.page"
        :page-sizes="[20, 40, 80, 100]"
        :page-size="pageData.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
      />
    </div>

    <!-- 添加分栏 -->
    <el-dialog
      title="添加分栏"
      :visible.sync="showEdit"
      width="35%"
      @close="showAdd = false"
    >
      <el-form
        :model="cData"
        ref="form2"
        :rules="rules"
        label-width="120px"
        :inline="false"
        size="normal"
        class="dbox"
      >
        <el-form-item label="字符编号">
          <el-input v-model="cData.id" style="width:270px" clearable></el-input>
        </el-form-item>
        <el-form-item label="非法字符名称">
          <el-input v-model="cData.name" style="width:270px" clearable></el-input>
        </el-form-item>
        <el-form-item label="非法字符信息">
          
          <el-input v-model="cData.info" type="textarea" autosize style="width:270px" clearable></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="showAdd = false">取消</el-button>
        <el-button type="primary" @click>提交</el-button>
      </span>
    </el-dialog>

    
  </div>
</template>

<script>
import {
  createCategory,
  categoryDetail,
  updateCategory,
  deleteCategory,
  categoryList,
} from "@/api/article";
export default {
  data() {
    return {
      cData: {},
      showEdit: false,
      rules: {},
      i: "", //cate_id
      uData: {},
      pageData: {
        page: 1,
        limit: 10,
      },
      total: 10,
      cate_list: [
        {
          id: "1",
          name: "1",
          info: "1",
          sortOrder: "1",
        },
        {
          id: "2",
          name: "2",
          info: "2",
          sortOrder: "2",
        },
        {
          id: "3",
          name: "3",
          info: "3",
          sortOrder: "3",
        },
        {
          id: "4",
          name: "4",
          info: "4",
          sortOrder: "4",
        },
      ],
      columns: [
        { key: 0, label: `字符编号`, data: "id", visible: true, width: 80 },
        { key: 1, label: `非法字符集名称`, data: "name", visible: true },
        { key: 2, label: `非法字符内容`, data: "info", visible: true }
      ],
    };
  },
  created() {},
  methods: {
    getCategoryList() {},
    add() {
      this.cData={};
      this.showEdit = true;

    },
    edit(i) {
      this.cData = i;
      this.showEdit = true;
    },
    detail(i) {
      console.log(i);
      this.i = i;
      this.showDetail = true;
    },
    createCategory() {
      createCategory(this.cData).then((r) => {});
    },
    getCategoryDetail() {
      categoryDetail().then((r) => {
        console.log(r);
      });
    },
    updateCategory(i) {
      updateCategory(this.uData).then((r) => {
        console.log(r);
      });
    },
    deleteCategory(i) {
      this.$confirm("确认删除所选数据？", "确认删除", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message.warning('删除成功！')
          this.cate_list.splice(i, 1);
        })
        .catch(() => {});
    },
    beforeCoverUpload() {},

    sizeChange(a) {
      this.pageData.limit = a;
      this.getCategoryList();
    },
    currentChange(a) {
      this.pageData.page = a;
      this.getCategoryList();
    },
  },
};
</script>
<style>
.sok {
  color: #5cb87a;
  width: 60px;
  margin: 0 auto;
  border: 1px solid #5cb87a;
  background: #fff;
  border-radius: 5px;
}
.sfail {
  color: #f56c6c;
  width: 60px;
  margin: 0 auto;
  border: 1px solid #f56c6c;
  background: #fff;
  border-radius: 5px;
}
.btnBox {
  height: 130px;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  align-items: center;
}
.btnBox .el-button {
  margin: 0;
}
</style>
